<template>
    <div>
        <el-container>
            <el-header>
                <div style="height: 59px;line-height: 60px; text-align: center;">
                    <img src="../assets/logo.png" @click="home" style="width: 100px; height: 67px;" alt="">
                </div>
            </el-header>
            <el-main>
                <div>
                    <el-select clearable v-model="topicTypeId" placeholder="请选择">
                        <el-option v-for="item in topicType" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                    <el-button type="primary" circle @click="getTopic()">搜索</el-button>
                </div>
                <p>{{ topic.title }}</p>
                <div v-if="topic.title">
                    <el-button type="success" @click="finAnswer" :disabled="checkStatus">查看答案</el-button>
                    <div class="intro-text" v-if="topicAnswer[0]">{{ topicAnswer[0].answerTitle }}
                    </div>
                </div>
                <div v-if="topicAnswer[0]">
                    <el-button type="success" @click="getTopic()">下一题</el-button>
                </div>
            </el-main>
        </el-container>
    </div>
</template>
<script>
export default {
    name: "index",
    data() {
        return {
            topicTypeId: "",
            topicType: [],
            logo: require('@/assets/logo.png'),
            topic: {},
            topicAnswer: [],
            checkStatus: false,
        }
    },
    methods: {
        getTopic() {
            this.checkStatus = false
            this.topicAnswer = []
            this.request.get("/refresh/getOne/" + this.topicTypeId).then(res => {
                this.topic = res.data;

            })
        },
        home() {
            this.$router.push("/home")
        },
        getType() {
            this.request.get("topic_type/list").then(res => {
                this.topicType = res.data
                this.topicTypeId = res.data[0].id
            })
        },
        finAnswer() {
            this.checkStatus = true;
            const token = localStorage.getItem("token")
            this.request.get("/topic_user_topic/answer?topicId=" + this.topic.id).then(res => {

            })
            if (token == null) {
                this.$router.push("/login")
                this.$message.error("请登陆")
            }
            this.topicAnswer = this.topic.answerVOs

        },

    },
    created() {
        this.getType();
    },
    mounted() {
    },
}
</script>
<style scoped>
.el-header {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
}

.el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    height: 100%;
}

.intro-text {
    word-break: break-all;
    word-wrap: break-word;
}
</style>